﻿<MContainer>
    <MRow>
        <MCol Cols="12"
              Lg="6">
            <MMenu @bind-Value="_menu1"
                   CloseOnContentClick="false"
                   Transition="scale-transition"
                   OffsetY
                   MaxWidth="290"
                   MinWidth="@("auto")">
                <ActivatorContent>
                    <MTextField @bind-Value="_dateFormatted"
                                Label="Date"
                                Hint="MM/DD/YYYY format"
                                PersistentHint
                                PrependIcon="mdi-calendar"
                                @attributes="context.Attrs"></MTextField>
                </ActivatorContent>
                <ChildContent>
                    <MDatePicker @bind-Value="Date"
                                 OnInput="()=>_menu1=false"
                                 NoTitle></MDatePicker>
                </ChildContent>
            </MMenu>
            <p>Date in ISO format: <strong> @Date.ToString("yyyy-MM-dd") </strong></p>
        </MCol>

        <MCol Cols="12"
              Lg="6">
            <MMenu @bind-Value="_menu2"
                   CloseOnContentClick="false"
                   Transition="scale-transition"
                   OffsetY
                   MaxWidth="290"
                   MinWidth="@("auto")">
                <ActivatorContent>
                    <MTextField Value="ComputedDateFormatted"
                                Label="Date (read only text field)"
                                Hint="MM/DD/YYYY format"
                                PersistentHint
                                PrependIcon="mdi-calendar"
                                Readonly
                                @attributes="context.Attrs"></MTextField>
                </ActivatorContent>
                <ChildContent>
                    <MDatePicker @bind-Value="Date"
                                 OnInput="()=>_menu2=false"
                                 NoTitle></MDatePicker>
                </ChildContent>
            </MMenu>
            <p>Date in ISO format: <strong> @Date.ToString("yyyy-MM-dd") </strong></p>
        </MCol>
    </MRow>
</MContainer>

@code {
    private DateOnly _date = DateOnly.FromDateTime(DateTime.Now);
    private string _dateFormatted = FormateDate(DateOnly.FromDateTime(DateTime.Now));
    private bool _menu1;
    private bool _menu2;

    private DateOnly Date
    {
        get
        {
            return _date;
        }
        set
        {
            _date = value;
            _dateFormatted = FormateDate(_date);
        }
    }

    public string ComputedDateFormatted => FormateDate(_date);

    public static string FormateDate(DateOnly date)
    {
        return date.ToString("MM/dd/yyyy");
    }
}

